<template>
    <div class="about">
        <!--        <div>-->
        <!--            <div v-for="item in accountList" :key="item.id">-->
        <!--                <span>{{item.id}}</span> &#45;&#45;-->
        <!--                <span>{{item.username}}</span> &#45;&#45;-->
        <!--                <span>{{item.password}}</span> &#45;&#45;-->
        <!--            </div>-->
        <!--        </div>-->
        <hr>
        <button @click="getTableData">点击查询</button>
        <div>
            <div v-for="item in tableList" :key="item.id">
                <span>{{item.id}}</span> --
                <span>{{item.username}}</span> --
                <span>{{item.password}}</span> --
            </div>
        </div>
        <button @click="handleGetById">点击根据 ID 查询</button>
    </div>

</template>

<script>
  import gql from "graphql-tag"

  // 定义查询的schema
  const accountListGql = gql`{
  accountList {
    id
    username
    password
  }
}`;

  export default {
    name: "About",
    // apollo: {
    //   accountList: gql`query {
    //   accountList {
    //     id
    //     username
    //     password
    //   }
    // }`
    // },

    // apollo 中使用函数来调用
    apollo: {
      // Cannot set property accountList of #<Object> which has only a getter"
      // apollog 中 accountList() 只有一个getter方法, 不可修改.
      // accountList() {
      //   return {
      //     query: gql`query{
      //       accountList{
      //       id
      //       username
      //       password
      //       created_at
      //       }
      //      }`
      //   }
      // }
    },
    data() {
      return {
        tableList: []
      }
    },
    methods: {
      getTableData() {
        // 这个方法可以查询数据，但是不能重复点击按钮，否则就会出现错误
        // this.$apollo.addSmartQuery('accountList', {
        //   query: accountListGql,
        //   result(response) {
        //     console.log(response);
        //     const {accountList} = response.data;
        //     this.tableList = accountList;
        //   },
        //   error(error) {
        //     console.log('请求失败', error);
        //   }
        // })

        // 改进版查询数据, 直接使用 query 方法来查询
        this.$apollo.query({
          query: gql`{
      accountList{
        id
        username
        password
      }
    }`,
        }).then(response => {
          console.log(response);
          const { accountList } = response.data;
          this.tableList =accountList;
        })
      },
      // 根据id查询
      handleGetById() {
        let rowData = {id: 1}
        this.$apollo.addSmartQuery('account', {
          query: gql`
          query xx($id: ID!) {
            account(id: $id) {
              id
              username
              password
            }
          }
        `,
          variables: {
            id: rowData.id,
          },
          result(response) {
            console.log('查询单条数据', response.data);
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
